<template>
  <div class="activity-add">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
      <el-form-item label="活动logo" prop="logo">
        <el-upload :limit="1" :action="uploadUrl" list-type="picture-card">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动名称" prop="name">
        <el-row>
          <el-col :md="12" :sm="18" :xs="24">
            <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="活动地址" prop="address">
        <el-row>
          <el-col :md="12" :sm="18" :xs="24">
            <el-input v-model="ruleForm.address" placeholder="请输入活动地址"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="主办单位" prop="organizers">
        <el-row>
          <el-col :md="12" :sm="18" :xs="24">
            <el-input v-model="ruleForm.organizers" placeholder="请输入主办单位"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="活动时间" prop="timerange">
        <el-date-picker
          v-model="ruleForm.timerange"
          type="datetimerange"
          align="right"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="活动描述" prop="description">
        <el-row>
          <el-col :md="12" :sm="18" :xs="24">
            <el-input type="textarea" v-model="ruleForm.description" placeholder="请输入活动描述，建议120字左右"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="活动内容" prop="content">
        <quill-editor
          ref="text"
          v-model="ruleForm.content"
          class="myQuillEditor"
          :options="editorOption"
        />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-row>
          <el-col :xs="12" :sm="8" :md="6" :lg="3">
            <el-input v-model="ruleForm.price" placeholder="0.00"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="选择座位" prop="seat_id">
        <el-select v-model="ruleForm.seat_id" placeholder="请选择">
          <el-option v-for="v in 3" :key="v" :label="v" :value="v"></el-option>
        </el-select>
        <el-button
          icon="el-icon-plus"
          circle
          type="primary"
          style="margin-left: 15px"
          @click="jump('/Admin/Seat/Add')"
        ></el-button>
      </el-form-item>
      <el-form-item label="选择表单" prop="form_id">
        <el-select v-model="ruleForm.form_id" placeholder="请选择">
          <el-option v-for="v in 3" :key="v" :label="v" :value="v"></el-option>
        </el-select>
        <el-button
          icon="el-icon-plus"
          circle
          type="primary"
          style="margin-left: 15px"
          @click="jump('/Admin/Form/Add')"
        ></el-button>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="ruleForm.status"
          :inactive-value="0"
          :active-value="1"
          active-text="上线"
          inactive-text="下线"
        ></el-switch>
      </el-form-item>
      <el-form-item v-if="ruleForm.status" label="是否立即发布">
        <el-switch
          v-model="ruleForm.is_publish"
          :inactive-value="0"
          :active-value="1"
          active-text="指定时间发布"
          inactive-text="立即发布"
        ></el-switch>
      </el-form-item>
      <el-form-item v-if="ruleForm.is_publish" label="指定发布时间">
        <el-date-picker
          type="datetime"
          placeholder="请选择发布日期"
          v-model="ruleForm.publish"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>

      <el-button type="primary" @click="submit">发布</el-button>
    </el-form>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'ActivityAdd',
  data () {
    return {
      ruleForm: {
        is_publish: 0,
        publish: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        logo: [{ required: true, message: '请上传活动logo', trigger: 'blure' }],
        address: [{ required: true, message: '请输入活动举行地址', trigger: 'blur' }],
        organizers: [{ required: true, message: '请输入活动主办单位', trigger: 'blur' }],
        timerange: [{ required: true, message: '请选择活动举行时间', trigger: 'blur' }],
        description: [{ required: true, message: '请输入120字左右的活动描述', trigger: 'blur' }],
        content: [{ required: true, message: '请输入活动的内容', trigger: 'blur' }],
        price: [{ required: true, message: '请设置本次活动购票价格', trigger: 'blur' }],
        seat_id: [{ required: true, message: '请选择座位模型', trigger: 'blur' }],
        form_id: [{ required: true, message: '请选择表单模型', trigger: 'blur' }]
      },
      editorOption: {
        placeholder: '请输入活动内容'
      }
    }
  },
  methods: {
    submit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('1')
        }
      })

      return false
    },

    jump (url) {
      this.$router.push(url)
    }
  },
  components: {
    quillEditor
  },
  computed: {
    uploadUrl () {
      return process.env.VUE_APP_BASE_URL + '/admin/attachment'
    }
  }
}
</script>
